<!--
- Author:  LiShibin.
- Date:    2017/9/29 0029.
- File:    与商品相关的文章/星心情日记列表(商品关联的百科关键字检索)
-->
<template>
  <div class="Web_Box">
    <div class="a_encytab">
      <div class="Tabs2">
        <ul>
          <li :class="{'on': type == '0'}" @click="switchType('0')">育花缘</li>
          <li :class="{'on': type == '1'}" @click="switchType('1')">遇见</li>
        </ul>
      </div>
    </div>
    <div class="bg_fff mb10" v-show="type == '0'">
      <div class="article_box f-cb"
        v-infinite-scroll="loadMoreArticle"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="articles_list f-cb"  v-for="article in articleList.data" @click="gotoArticleDetail(article.id, article.is_sys)">
          <div class="art_tit slh">{{article.title}}</div>
          <div class="author"><span class="au_img" @click.stop="gotoBlog(article.member_id, '1')"><img :src="article.member_avatar ? $config.imgsite + $config.avatarSrc + article.member_avatar + '_w150': defaultAvatar"></span><span class="au_name" @click.stop="gotoBlog(article.member_id, '1')">{{article.member_name}}</span><span class="au_time fr">{{article.add_time | timestampToDate('yyyy-MM-dd')}}</span></div>
        </div>
      </div>
    </div>
    <div class="bg_fff mb10" v-show="type == '1'"
      v-infinite-scroll="loadMoreDiary"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="diary" v-for="diary in diaryList.data">
        <ul class=" f-cb">
          <li class="imgs" @click="gotoBlog(diary.member_id, '0')"><img :src="diary.member_avatar ? $config.imgsite + $config.avatarSrc + diary.member_avatar + '_w150' : defaultAvatar"></li>
          <li class="pl20 w480">
            <h3 class="d_tit"><span @click="gotoBlog(diary.member_id, '0')">{{diary.member_name}}</span></h3>
            <!--<p class="slh">{{diary.add_time | timestampToDate('yyyy-MM-dd')}}</p>-->
            <div class="blk_img2 photoBrowser">
              <ul class="f-cb" v-if="diary.images && diary.images.length>0">
                <li v-for="(img, imgIndex) in diary.images" @click="showImg(diary.imgList, imgIndex)"><img :src="$config.imgsite + $config.uploadImgSrc + img + '_w200'"></li>
              </ul>
              <div class="g_cont pt10" v-show="diary.content">{{diary.content}}</div>
              <div class="Locations"><span class="pl30">{{diary.add_time | getDateDiff}}</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <loading-more :allLoaded="articleList.allLoaded" :show="type == '0' && articleList.data.length > 0"></loading-more>
    <empty-data :show="type == '0' && articleList.allLoaded && articleList.data.length <= 0"></empty-data>
    <loading-more :allLoaded="diaryList.allLoaded" :show="type == '1' && diaryList.data.length > 0"></loading-more>
    <empty-data :show="type == '1' && diaryList.allLoaded && diaryList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        mid: this.$route.params.mid,
        type: 0, // 0 文章 1 心情日记
        defaultAvatar: require('../../assets/images/avatar.png'),
        articleList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        diaryList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    created() {
      this.getRelationArticleList(this.articleList.page, this.articleList.pageSize)
      this.getRelationDiaryList(this.diaryList.page, this.diaryList.pageSize)
    },
    watch: {
      $route () {
        this.type = 0
        this.articleList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getRelationArticleList(this.articleList.page, this.articleList.pageSize)
      }
    },
    methods: {
      gotoBlog(memberId, showType) {
        this.$router.push({name: 'blog-index', query: {member: memberId, showType: showType}})
      },
      gotoArticleDetail(id, isSys) {
        if (isSys == '0') { // 手机端发布的文章
//          this.$router.push({name: 'article-detail', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail/' + id // ios微信分享要如此跳转后才能正确分享
        }
        if (isSys == '1') { // 后台发布的文章
//          this.$router.push({name: 'article-detail2', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail2/' + id // ios微信分享要如此跳转后才能正确分享
        }
      },
      switchType(type) {
        this.type = type
      },
      getRelationDiaryList(page, pageSize) {
        this.diaryList.loading = true
        this.$request.getRelationDiaryList(this.mid, page, pageSize).then(data => {
          if (data.length < this.diaryList.pageSize) {
            this.diaryList.allLoaded = true
          }
          this.diaryList.data = [...this.diaryList.data, ...data]
        }).finally(() => {
          this.diaryList.requested = true
          this.diaryList.loading = false
        })
      },
      getRelationArticleList(page, pageSize) {
        this.articleList.loading = true
        this.$request.getRelationArticleList(this.mid, page, pageSize).then(data => {
          if (data.length < this.articleList.pageSize) {
            this.articleList.allLoaded = true
          }
          this.articleList.data = [...this.articleList.data, ...data]
        }).finally(() => {
          this.articleList.requested = true
          this.articleList.loading = false
        })
      },
      loadMoreArticle() {
        if (this.type == '1' || this.articleList.loading || this.articleList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getRelationArticleList(++this.articleList.page, this.articleList.pageSize)
        }, 500)
      },
      loadMoreDiary() {
        if (this.type == '0' || this.diaryList.loading || this.diaryList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getRelationDiaryList(++this.diaryList.page, this.diaryList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>